<template>
	<view>
		<block v-for="(item, index) in diyItems" :key="index">
			<template v-if="item.type == 'option'">
				<options :itemData="item" @setIndex="setIndex"></options>
			</template>
			<template v-if="item.type == 'topMerge'">
				<topMerge :itemData="item" :diytop="diytop" @parentFunc="parentFunc" @setIndex="setIndex"></topMerge>
			</template>
			<!--搜索框-->
			<template v-if="item.type==='search'">
				<search :itemData="item" :diytop="diytop"></search>
			</template>
		</block>
		<view v-if="thisindex == 0">
			<block v-for="(item, index) in diyItems" :key="index">
				<!--轮播图-->
				<template v-if="item.type === 'banner' && item.data != null">
					<banner :itemData="item"></banner>
				</template>

				<!--单组图-->
				<template v-if="item.type === 'imageSingle' && item.data != null">
					<imagesingle :itemData="item"></imagesingle>
				</template>

				<!-- 橱窗-->
				<template v-if="item.type == 'window' && item.data != null">
					<windows :itemData="item"></windows>
				</template>

				<!-- 视频组-->
				<template v-if="item.type == 'video'">
					<videos :itemData="item"></videos>
				</template>

				<!--文章-->
				<template v-if="item.type == 'article' && item.data != null">
					<articles :itemData="item"></articles>
				</template>

				<!--头条快报-->
				<template v-if="item.type == 'special' && item.data != null">
					<special :itemData="item"></special>
				</template>

				<!--公告组-->
				<template v-if="item.type == 'notice'">
					<notice :itemData="item"></notice>
				</template>
				<!--标题组-->
				<template v-if="item.type == 'title'">
					<titles :itemData="item"></titles>
				</template>
				<!--导航组-->
				<template v-if="item.type === 'navBar' && item.data != null">
					<navBar :itemData="item"></navBar>
				</template>

				<!--商品组-->
				<template v-if="item.type === 'product' && item.data != null">
					<product :itemData="item"></product>
				</template>

				<!--优惠券-->
				<template v-if="item.type === 'coupon' && item.data != null">
					<coupon :itemData="item"></coupon>
				</template>

				<!--门店-->
				<template v-if="item.type == 'store' && item.data != null">
					<store :itemData="item"></store>
				</template>

				<!--客服-->
				<template v-if="item.type == 'service'">
					<service :itemData="item"></service>
				</template>

				<!--富文本-->
				<template v-if="item.type === 'richText'">
					<richText :itemData="item"></richText>
				</template>

				<!--辅助空白-->
				<template v-if="item.type == 'blank'">
					<blank :itemData="item"></blank>
				</template>

				<!--辅助线-->
				<template v-if="item.type == 'guide'">
					<guide :itemData="item"></guide>
				</template>

				<!--秒杀-->
				<template v-if="item.type == 'seckillProduct' && item.data != null">
					<seckillProduct :itemData="item"></seckillProduct>
				</template>
				<!--预告-->
				<template v-if="item.type == 'previewProduct' && item.data != null">
					<previewProduct :itemData="item"></previewProduct>
				</template>
				<!--拼团-->
				<template v-if="item.type == 'assembleProduct' && item.data != null">
					<assembleProduct :itemData="item"></assembleProduct>
				</template>

				<!--砍价-->
				<template v-if="item.type == 'bargainProduct' && item.data != null">
					<bargainProduct :itemData="item"></bargainProduct>
				</template>

				<!--微信直播-->
				<!-- #ifdef MP-WEIXIN -->
				<template v-if="item.type == 'wxlive' && item.data != null">
					<wxlive :itemData="item"></wxlive>
				</template>

				<!-- #endif -->
				<!--视频直播-->
				<template v-if="item.type == 'videoLive'">
					<videoLive :itemData="item"></videoLive>
				</template>
				<!--个人信息-->
				<template v-if="item.type === 'base'">
					<userBase :itemData="item" :userInfo="userInfo" :isLogin="isLogin">
						<slot />
					</userBase>
				</template>
				<!--个人信息-->
				<template v-if="item.type === 'order'">
					<order :itemData="item" :userInfo="userInfo"></order>
				</template>

			</block>
		</view>
		<view v-if="thisindex != 0" class="nav-product" style="width: 750rpx;">
			<view class="product-list">
				<view v-for="(pitem, pindex) in listData" :key="pindex" class="product_item o-h"
					:class="pindex % 2 == 1 ? 'product_item_right' : ''"
					@click="gotoPage('/pages/product/detail/detail?productId=' + pitem.productId)">
					<view>
						<image lazy-load :src="pitem.productImage" mode="" style="width: 345rpx;height: 345rpx;">
						</image>
					</view>
					<view class="text-ellipsis-2 f26 pro_name  p-0-20 mt20">{{ pitem.productName }}</view>
					<view class="mt36 mb20 p-0-20">
						<text class="f20 fb redF6">￥</text>
						<text class="f32 fb redF6">{{ pitem.productPrice }}</text>
						<template v-if="pitem.linePrice > 0">
							<text class="text-d-line f20 gray9 ml10">￥</text>
							<text class="text-d-line f24 gray9">{{ pitem.linePrice }}</text>
						</template>
					</view>
				</view>
			</view>
			<view class="d-c-c p30 " v-if="listData.length == 0 && !loading">
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">亲，暂无相关记录哦</text>
			</view>
			<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
		</view>
	</view>

</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	import search from './search/search';
	import banner from './banner/banner';
	import imagesingle from './imagesingle/imagesingle';
	import windows from './window/window';
	import videos from './videos/videos';
	import articles from './article/article';
	import special from './special/special';
	import notice from './notice/notice';
	import titles from './title/title';
	import coupon from './coupon/coupon';
	import richText from './richText/richText';
	import navBar from './navBar/navBar';
	import store from './store/store';
	import service from './service/service';
	import blank from './blank/blank';
	import guide from './guide/guide';
	import product from './product/product';
	import seckillProduct from './seckillProduct/seckillProduct';
	import assembleProduct from './assembleProduct/assembleProduct';
	import bargainProduct from './bargainProduct/bargainProduct';
	import previewProduct from './previewProduct/previewProduct';
	import wxlive from './wxlive/wxlive';
	import userBase from './base/base';
	import order from './order/order';
	import options from './option/option.vue';
	import topMerge from './topMerge/topMerge.vue';
	export default {
		components: {
			uniLoadMore,
			search,
			banner,
			imagesingle,
			windows,
			videos,
			articles,
			special,
			notice,
			titles,
			coupon,
			richText,
			navBar,
			store,
			service,
			blank,
			guide,
			product,
			seckillProduct,
			assembleProduct,
			bargainProduct,
			previewProduct,
			wxlive,
			userBase,
			order,
			options,
			topMerge
		},
		data() {
			return {
				thisindex: 0,
				categoryId: '',
				listData: [],
				page: 1,
				lastPage: 0,
				no_more: false,
				loading: true
			};
		},
		props: ['diyItems', 'userInfo', 'diytop', 'isLogin'],
		computed: {
			/*加载中状态*/
			loadingType() {
				if (this.loading) {
					return 1;
				} else {
					if (this.listData.length != 0 && this.no_more) {
						return 2;
					} else {
						return 0;
					}
				}
			},
			scrolltop() {
				let height = 80 - this.diytop * 2;
				if (height <= 0) {
					return 0;
				} else {
					return height;
				}
			}
		},
		created() {},
		methods: {
			parentFunc(e) {
				this.$emit(e.name, e.value);
			},
			setIndex(n, id) {
				this.thisindex = n;
				if (id == '' && this.categoryId !== 0) {
					this.categoryId = 0;
					this.initProduct();
				} else if (this.categoryId != id) {
					this.categoryId = id || 0;
					this.initProduct();
				}

			},
			/*获取数据*/
			getProduct() {
				let self = this;
				let page = self.page;
				self.loading = true;
				self._postBody(
					'product/product/lists', {
						pageIndex: page || 1,
						categoryId: self.categoryId,
						search: '',
						sortType: 'all',
						sortPrice: 0,
						pageSize: 20
					},
					function(res) {
						self.loading = false;
						self.$emit('stopPush');
						self.listData = self.listData.concat(res.data.records);
						self.lastPage = res.data.lastPage;
						if (res.data.lastPage <= 1) {
							self.no_more = true;
						}
						// #ifdef MP
						if (page >= 9) {
							self.no_more = true;
						}
						// #endif
					}
				);
			},
			initProduct() {
				if (this.thisindex != 0) {
					this.listData = [];
					this.page = 1;
					this.no_more = false;
					this.getProduct();
				}
			},
			/*可滚动视图区域到底触发*/
			scrolltolowerFunc() {
				if (this.thisindex != 0) {
					if (this.page < this.lastPage) {
						this.page++;
						this.getProduct();
					}
					this.no_more = true;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.nav-product {
		width: 750rpx;
	}

	.product-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		position: relative;
		z-index: 1;
	}

	.product_item {
		width: 345rpx;
		margin: 20rpx;
		border-radius: 12rpx;
		background-color: #ffffff;
	}

	.product_item.product_item_right {
		margin-left: 0;
	}

	.product_item .pro_name {
		height: 68rpx;
		line-height: 34rpx;
	}
</style>